<template>
  <div class="app-container">
      <!-- <PageHeader :border="false" title="警务派警确认"/> -->
      <el-form ref="queryParamsRef" :inline="true" :model="queryParams">
        <el-row>
            <el-col :span="8">
                <el-form-item label="时间起止" label-width="100px">
                    <el-date-picker
                        v-model="searchTime"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="开始时间"
                        end-placeholder="截止时间"
                        value-format="YYYY-MM-DD"
                        @change="changeDateTimerHandle"
                        style="width:300px"
                    />
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="法警姓名" label-width="100px">
                    <el-input v-model="queryParams.userName"
                    style="width:300px"
                    clearable 
                    @change="getSendPoliceConfirmLists"
                    @keydown.enter.prevent="getSendPoliceConfirmLists"/>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="派警类型" label-width="100px">
                    <el-select v-model="queryParams.recordType" 
                    clearable 
                    style="width:300px" 
                    @change="getSendPoliceConfirmLists">
                        <el-option
                            v-for="item in filteredSendPoliceType"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="状态" label-width="100px">
                    <el-select v-model="queryParams.state" clearable style="width:300px" @change="getSendPoliceConfirmLists">
                        <el-option
                            v-for="item in nj_sendpolice_status"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item>
                    <el-button type="primary" @click="getSendPoliceConfirmLists">
                        <el-icon class="me-1">
                            <Search/>
                        </el-icon>
                        查询
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="handleRest(queryParamsRef)">
                        <el-icon class="me-1">
                            <Refresh/>
                        </el-icon>
                        重置
                    </el-button>
                </el-form-item>
            </el-col>
        </el-row>
      </el-form>
      <el-divider class="mt-0"/>
      <el-table
          ref="SendPoliceTableRef"
          v-loading="loading"
          :data="SendPoliceTable"
          @selectionChange="selectChangeHandle"
          @row-dblclick="handleRowDblClick"
          stripe
          :row-style="tableRowStyle"
          show-overflow-tooltip
          border
      >
        <el-table-column label="派警人" prop="senduser_id"/>
        <el-table-column label="派警时间" prop="senddate" width="160"/>
        <el-table-column label="派警类型" prop="recordType">
            <template #default="scope">
                <dict-tag :options="nj_sendpolice_type" :value="scope.row.recordType" />
            </template>
        </el-table-column>
        <el-table-column label="法警姓名" prop="userName" width="120"/>
        <el-table-column label="任务项区分一" prop=""/>
        <el-table-column label="任务项区分二" prop=""/>
        <el-table-column label="法警退回原因" prop="backreason" width="160"/>
        <el-table-column label="状态" prop="state">
        <template #default="scope">
            <dict-tag :options="nj_sendpolice_status" :value="scope.row.state" />
        </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="140">
            <template #default="scope">
                <el-button
                    link size="small"
                    type="primary"
                    @click="AddEditSendPoliApplRef.showEditUsePoliAppl(scope.row,'警务派警信息确认','5','Edit')"
                    >
                    <el-icon class="me-1">
                        <Edit/>
                    </el-icon>
                    确认
                </el-button>
                <el-button
                    link size="small"
                    type="primary"
                    @click="AddEditSendPoliApplRef.showEditUsePoliAppl(scope.row,'警务派警信息','5','View')"
                    >
                    <el-icon class="me-1">
                        <View/>
                    </el-icon>
                    查看
                </el-button>
            </template>
        </el-table-column>
      </el-table>
      <pagination
          v-show="total > 0"
          v-model:limit="paging.pageSize"
          v-model:page="paging.pageNum"
          :total="total"
          @pagination="getSendPoliceConfirmLists"
      />

      <!-- 用的就是派警申请的组件 只是组件名变了-->
      <AddEditSendPoliAppl ref="AddEditSendPoliApplRef" @getUserPoliApplList="getSendPoliceConfirmLists"  />
  </div>
  
</template>

<script setup>
import PageHeader from "@/components/PageHeader/index.vue";
import {ElMessageBox} from 'element-plus'

import AddEditSendPoliAppl from "@/components/UserPoli/UserPoli.vue";

import {getSendPoliceConfirmList} from "@/api/SendPolice/SendPolice";

import {getCurrentInstance} from "vue";
import PageEnum from "@/enum/PageEnum.js";

const {proxy} = getCurrentInstance();
const {nj_sendpolice_type,nj_sendpolice_status,nj_anjian_type} = proxy.useDict('nj_sendpolice_type', 'nj_sendpolice_status','nj_anjian_type')

// 计算属性过滤字典数据
const filteredSendPoliceType = computed(() => {
  return nj_sendpolice_type.value.filter(item => item.value == 2 || item.value == 3);
});

const queryParamsRef = ref()
const deleteStatus = ref(true)
const AddEditSendPoliApplRef = ref({})
const loading = ref(false)
const searchTime = ref([])
const paging = ref({
  // 页码
  pageNum: 1,
  // 分页数量
  pageSize: PageEnum.SIZE
})
const queryParams = ref({ recordType: null })

const total = ref(0)
const SendPoliceTable = ref([])

onMounted(() => {
  getSendPoliceConfirmLists()
})
// 斑马纹样式函数
const tableRowStyle = ({ row, rowIndex }) => {
    if (rowIndex % 2 === 0) {
        return { backgroundColor: '#e6ecff' }; // 偶数行背景色
    }
    return {}; // 奇数行默认透明
}
// 
const getSendPoliceConfirmLists = async () => {
  loading.value = true
  await getSendPoliceConfirmList(queryParams.value, paging.value).then(res => {
      console.log(res)
      SendPoliceTable.value = res.rows
      total.value = res.total
      loading.value = false
  })
}
const selectChangeHandle = (data) => {
  deleteStatus.value = data.length === 0;
}
const handleRowDblClick = (row) => {
    AddEditSendPoliApplRef.value.showEditUsePoliAppl(row,'警务派警信息','5','View')
}
// 改变时间
const changeDateTimerHandle = (date) => {
    if (date) {
        queryParams.value = {
            ...queryParams.value,
            params: {
                beginTime: date[0],
                endTime: date[1]
            }
        }
    } else {
        queryParams.value = {
            ...queryParams.value,
            params: {
                beginTime: '',
                endTime: ''
            }
        }
    }
    getSendPoliceConfirmLists()
}
// 重置搜索调解
const handleRest = (formEl) => {
  queryParams.value = {
  }
  getSendPoliceConfirmLists()
}
</script>

<style lang="scss" scoped>
/* 保留斑马纹的同时添加悬停效果 */
:deep().el-table--striped .el-table__body tr.el-table__row--striped:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}

:deep().el-table__body tr:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}

</style>